<template>
  <div class="login">
    <div class="img">
      <img src="../../../assets/images/login.png" />
    </div>
    <div class="loginForm animated animate__zoomIn">
      <div class="toggle">
        <Icon
          @click="setLoginState(state)"
          class="mobile-icon"
          :icon="getShow ? 'bi:qr-code-scan' : 'clarity:mobile-line'"
          size="24"
        ></Icon>
      </div>
      <LoginForm />
      <QrCodeForm />
      <ForgetPasswordForm />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed, unref } from 'vue';
  import LoginForm from './components/LoginForm.vue';
  import QrCodeForm from './components/QrCodeForm.vue';
  import ForgetPasswordForm from './components/ForgetPasswordForm.vue';
  import { Icon } from '/@/components/Icon';
  import { useLoginState, LoginStateEnum } from './components/useLogin';

  const { getLoginState, setLoginState } = useLoginState();
  const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN);
  const state = computed(() =>
    unref(getLoginState) === LoginStateEnum.LOGIN ? LoginStateEnum.QR_CODE : LoginStateEnum.LOGIN,
  );
</script>

<style lang="less" scoped>
  @media (max-width: 1200px) {
    .img {
      display: none;
    }
    .loginForm {
      left: 50%;
      transform: translate(-50%) !important;
    }
  }
  .login {
    position: relative;
    width: 100%;
    height: 100vh;
    background: linear-gradient(225deg, #f1fffe 0%, rgba(255, 255, 255, 0.92) 100%);
    img {
      position: absolute;
      // top: 50%;
      // transform: translate(0, -50%);
      width: calc(100% - 710px);
      // margin-top: calc(0px + -25%);
    }
    .loginForm {
      position: absolute;
      right: 104px;
      top: 50%;
      // transform: translateY(-50%);
      width: 570px;
      height: 720px;
      padding: 128px 65px 166px;
      margin-top: -360px; //高度的一半
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 10px 10px 10px 10px;
      overflow: hidden;
      .toggle {
        position: absolute;
        right: 0;
        top: 0;
        width: 103px;
        height: 103px;
        background: linear-gradient(to bottom left, #f8fafc 50%, transparent 50%);
        .mobile-icon {
          position: absolute;
          right: 18px;
          top: 18px;
        }
      }
    }
  }
</style>
